<template>
	<!-- 注意有自定义指令 -->
	<div class="home-container" v-loading="loading">
		<ul
			class="carousel"
			:style="{ marginTop: marginTopValue }"
			@wheel="handleWheel"
			@transitionend="isWheel = false"
		>
			<li v-for="item in data" :key="item.id">
				<carousel-item :carousel="item" @load="handleLoad"></carousel-item>
			</li>
		</ul>
		<!-- 固定定位：向上和向下箭头 -->
		<div class="icon arrowUp" v-show="currentIndex >= 1" @click="swtichTo(currentIndex - 1)">
			<Icon type="arrowUp" />
		</div>
		<div class="icon arrowDown" v-show="currentIndex < data.length - 1" @click="swtichTo(currentIndex + 1)">
			<Icon type="arrowDown" />
		</div>
		<!-- 固定定位：圆球多少个banner就生成多少个 -->
		<ul class="indicator">
			<li
				v-for="(item, index) in data"
				:key="item.id"
				:class="{ active: currentIndex === index }"
				@click="swtichTo(index)"
			></li>
		</ul>
	</div>
</template>

<script>
import { getBanners } from '@/api/banner'
import CarouselItem from './components/CarouselItem'
import Icon from '@/components/Icon.vue'
import { mapState } from 'vuex'
export default {
	name: 'Home',
	components: {
		CarouselItem,
		Icon,
	},
	mounted() {
		// 首页加载时触发仓库加载
		this.$store.dispatch('banner/fetchBanner')
		// 监听窗口尺寸变化
		window.onresize = () => {
			this.perHeight = document.documentElement.clientHeight
		}
	},
	methods: {
		swtichTo(index) {
			this.currentIndex = index
		},
		handleWheel(e) {
			if (this.isWheel) {
				return
			}
			if (e.deltaY >= 100) {
				if (this.currentIndex < this.data.length - 1) {
					this.isWheel = true
					this.currentIndex += 1
				}
			} else if (e.deltaY <= -100) {
				if (this.currentIndex >= 1) {
					this.isWheel = true
					this.currentIndex -= 1
				}
			}
		},
		handleLoad() {
			this.isLoaded = false
		},
		// 给混入提供的fetchData函数
		async fetchData() {
			const res = await getBanners()
			console.log(res)
			return res
		},
	},
	computed: {
		marginTopValue() {
			return -this.currentIndex * this.perHeight + 'px'
		},
		// 从仓库取
		...mapState('banner', ['loading', 'data']),
	},
	data() {
		return {
			currentIndex: 0,
			// 初始化窗口的尺寸
			perHeight: document.documentElement.clientHeight,
			// 是否在滚轮事件触发当中
			isWheel: false,
			// 子组件图片标识
			isLoaded: true,
		}
	},
	destroyed() {
		window.onresize = null
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/animation/bouceUpAndDown.less';
@import '~@/styles/basic/var.less';
.home-container {
	width: 100%;
	height: 100%;
	@gap: 3%;
	.icon {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: @gray;
		z-index: 100;
		i {
			font-size: 2rem;
			cursor: pointer;
		}
	}
	.arrowUp {
		top: @gap;
		animation: bounceUp 2s infinite linear alternate;
	}
	.arrowDown {
		bottom: @gap;
		animation: bounceDown 2s infinite linear alternate;
	}
	.indicator {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: @gap;
		li {
			display: block;
			width: 12px;
			height: 12px;
			border: 2px solid #fff;
			margin: 4px 0;
			border-radius: 50%;
			background-color: transparent;
			cursor: pointer;
			&.active {
				background-color: #fff;
				cursor: auto;
			}
		}
	}
	.carousel {
		transition: margin-top 0.5s;
		width: 100%;
		height: 100%;
		& > li {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
